<script type="text/javascript">
	$(function() {

	$('<?php echo '.'.'colorSelector'.$wid?>
	div').css('backgroundColor', '#' + '000000');
	
	$("<?php echo  '#'.$wid?>").css('opacity', <?php echo  100-$style['opacity']?>);
	// var colorSelect='.colorSelector'+style.wid+' div';
	// $(colorSelect).css('backgroundColor', '#' + '000000');

	//http://www.eyecon.ro/colorpicker/
	$("<?php echo '.colorSelector'.$wid?>").ColorPicker({
		color: '#0000ff',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onSubmit:function (hsb, hex, rgb) {
	
			$("<?php echo '.'.'colorSelector'.$wid?> div").css('backgroundColor', '#' + hex);
			// $("<?php echo  '#'.$wid?>").css('backgroundColor', '#' + hex);
		},
		onChange: function (hsb, hex, rgb) {
	
			$("<?php echo '.'.'colorSelector'.$wid?> div").css('backgroundColor', '#' + hex);
			// style.background-color='#' + hex;
		}
	});
	
	$('<?php echo '#btnEditor'.$wid?>').hide();
	$('<?php echo '.'.'slider'.$wid?>').slider({
	min: 1,
	max: 100,
	value: <?php echo  $style['opacity']?>,
	range: "min",
	slide: function( event, ui ) {
	//alert(ui.value);
	var v=(100-ui.value)/100;
	$("<?php echo  '#'.$wid?>").css('opacity', v);
	// style.opacity=v;

	},
	stop: function(event, ui) {
		var v=(100-ui.value)/100;
		alert(v);
	}
	});
	var text;
	var me=this;
	$('<?php echo '#btnEditor'.$wid?>').click(function(){
		$('<?php echo '#btnEditor'.$wid?>').hide();
		$('<?php echo '#btnPreview'.$wid?>').show();
		$('<?php echo '.editor'.$wid?>').show();
		$('<?php echo '.preview'.$wid?>').html('');
	});
	
	$('<?php echo '#btnPreview'.$wid?>').click(function(){
		$('<?php echo '#btnEditor'.$wid?>').show();
		$('<?php echo '#btnPreview'.$wid?>').hide();
		$('<?php echo '.editor'.$wid?>').hide();
		$('<?php echo '.preview'.$wid?>').html("<div id='tinymce' class='mceContentBody' contenteditable='true' spellcheck='false' dir='ltr'></div>");
		// alert($('.preview').html());
		$('<?php echo '.preview'.$wid.' #tinymce' ?>').html($("<?php echo '#content'.$wid?>").html());
		//$('<?php echo '.preview'.$wid?>').html($("<?php echo '#content'.$wid?>").html());
			// alert($('#content').html());
			});
	
			$('#btnSave').click(function(){
			// document.write(styles[0]);	
			});
		});
</script>
<table >
	<tbody>
		<tr>
			<td>背景色 <?php print_r($style['opacity']);?></td>
			<td >
			<div id="colorSelector "class="<?php echo 'colorSelector'.$wid?>"></div>
			</td>
		</tr>
		<tr>
			<td >透明度</td>
			<td>
			<div class="<?php echo 'opacity'.$wid?>">
				<div  class="<?php echo 'slider'.$wid?>" name='opacity'></div>
			</div></td>
		</tr>
		<tr>
			<td >字体</td>
			<td>
			<div class="<?php //echo 'font'.$wid?>">
				<select name="select" id="<?php echo 'font'.$wid?>">
					<option value="宋体"selected="selected">宋体</option>
					<option value="隶书">隶书</option>
				</select>
				<select name="select" id="<?php echo 'fontsize'.$wid?>">
					<option value="14"selected="selected">14</option>
					<option value="15"selected="selected">15</option>
					<option value="16"selected="selected">16</option>
					<option value="17"selected="selected">17</option>
					<option value="18"selected="selected">18</option>
					<option value="19"selected="selected">19</option>
					<option value="20"selected="selected">20</option>
				</select>
				<div id="fontcolor "class="<?php echo 'fontcolor'.$wid?>">

				</div>
			</td>
		</tr>
		<tr>
			<td >文字</td>
			<td>
			<input type='button' id='<?php echo 'btnEditor'.$wid?>' value='编辑'/>
			<input type='button' id='<?php echo 'btnPreview'.$wid?>' value='预览'/>
			</td>
		</tr>
		<tr>
			<td >操作</td>
			<td>
			<input type='button' id='<?php echo 'btnSave'.$wid?>' value='保存'/>
			<input type='button' id='<?php echo 'btnDel'.$wid?>' value='删除'/>
			</td>
		</tr>
	</tbody>
</table>
